Editor's stitch type dropdown doesn't surface which types are appropriate for the path's geometry — user picking 'fill' for a 2-node line gets no warning (fill is meaningless for a line) #354

New issue

Closed

opened 2026-10-04 03:56:29 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:56:29 +00:00

Owner

Finding

The stitch type dropdown shows all 5 types regardless of the path's geometry. A user with a 2-node line:

Picks "fill"
Doesn't realize fill is meaningless for a line (no enclosed area)
Exports and gets unexpected results

The fix is to disable or warn about inappropriate types.

Where

Dropdown: src/components/editor/EditorRightPanel.tsx
No geometry-aware filtering: grep -rn 'recommendedStitchType' src/components/editor/ returns 0
The path's geometry: path.nodes.length, path.isClosed

Suggested fix shape

Algorithm: a function that recommends types based on the path's geometry:

function recommendedStitchTypes(path: StitchPath): UserFacingStitchType[] {
  const types: UserFacingStitchType[] = [];
  if (path.nodes.length === 2) {
    types.push('running');  // Lines are running stitches
  } else if (path.isClosed) {
    types.push('fill');  // Closed shapes can be filled
  }
  if (path.nodes.length >= 4) {
    types.push('satin');  // Satin for narrow columns
  }
  types.push('cross-stitch', 'zigzag');  // Always available
  return types;
}

UI: in the dropdown, the recommended types are at the top with a star icon, the others are below:

{recommendedTypes.map((type) => (
  <SelectItem key={type} value={type}>
    <Star size={10} /> {STITCH_LABELS[type]} (recommended)
  </SelectItem>
))}
{otherTypes.map((type) => (
  <SelectItem key={type} value={type}>
    {STITCH_LABELS[type]}
  </SelectItem>
))}

Visual feedback: when the user picks a non-recommended type, a small "Are you sure? 'fill' is unusual for an open path." message.

Severity

Low. The user can pick any type. Power users notice the guidance gap.

Discovered by

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

#326 (open) — Node count goal. Same guidance family.
#345 (open) — Auto-fix validations. The recommendations are the proactive version.
Figma has "Smart selection" that auto-suggests the right tool. The editor's gap is the parallel.

## Finding The stitch type dropdown shows all 5 types regardless of the path's geometry. A user with a 2-node line: - Picks "fill" - Doesn't realize fill is meaningless for a line (no enclosed area) - Exports and gets unexpected results The fix is to disable or warn about inappropriate types. ## Where - Dropdown: `src/components/editor/EditorRightPanel.tsx` - No geometry-aware filtering: `grep -rn 'recommendedStitchType' src/components/editor/` returns 0 - The path's geometry: `path.nodes.length`, `path.isClosed` ## Suggested fix shape 1. **Algorithm**: a function that recommends types based on the path's geometry: ```ts function recommendedStitchTypes(path: StitchPath): UserFacingStitchType[] { const types: UserFacingStitchType[] = []; if (path.nodes.length === 2) { types.push('running'); // Lines are running stitches } else if (path.isClosed) { types.push('fill'); // Closed shapes can be filled } if (path.nodes.length >= 4) { types.push('satin'); // Satin for narrow columns } types.push('cross-stitch', 'zigzag'); // Always available return types; } ``` 2. **UI**: in the dropdown, the recommended types are at the top with a star icon, the others are below: ```tsx {recommendedTypes.map((type) => ( <SelectItem key={type} value={type}> <Star size={10} /> {STITCH_LABELS[type]} (recommended) </SelectItem> ))} {otherTypes.map((type) => ( <SelectItem key={type} value={type}> {STITCH_LABELS[type]} </SelectItem> ))} ``` 3. **Visual feedback**: when the user picks a non-recommended type, a small "Are you sure? 'fill' is unusual for an open path." message. ## Severity Low. The user can pick any type. Power users notice the guidance gap. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related - #326 (open) — Node count goal. Same guidance family. - #345 (open) — Auto-fix validations. The recommendations are the proactive version. - Figma has "Smart selection" that auto-suggests the right tool. The editor's gap is the parallel.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:56:29 +00:00

Mark referenced this issue

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

Editor's Path Properties has 'Stitch type' but no 'recommended stitch type' for the path's geometry — user with a 2-node line gets a 'Satin' option (which is unusual for a line) #385

Mark referenced this issue from a commit

2026-10-05 12:13:49 +00:00

feat(#354): geometry-aware stitch-type recommendations in Path Properties

Mark commented

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

Author

Owner

Fixed by commit 668f1d8 (origin/main).

Surfaces geometry-aware guidance in two surfaces in the Path Properties Stitch Type row:

Dropdown reorders so recommended types appear first with a 'star (recommended)' suffix on the option label.
Inline advisory below the select when the current pick is non-recommended for the path's geometry.

Rules:

2-node line -> running recommended
Closed 3+-node shape -> fill recommended
4+-node polyline -> satin recommended (narrow column case)
cross-stitch / zigzag always available regardless of geometry

Advisory text (e.g. fill on a 2-node line -> 'fill is unusual for a 2-node line. Consider running.'; fill on an open 3+-node polyline -> 'fill needs a closed path to enclose an area.') plus a fallback 'is unusual for this path's geometry' message.

16 tests in src/components/editor/issue-354.test.tsx pin the helper contract and the dropdown / advisory markup. Pure helpers exported as recommendedStitchTypes + stitchTypeAdvisory for direct unit tests. Typecheck + lint clean; pre-existing test failures (issues #329/#331/#333/#334 - closed-path findTightCurves crash) unchanged.

Fixed by commit 668f1d8 (origin/main). Surfaces geometry-aware guidance in two surfaces in the Path Properties Stitch Type row: 1. Dropdown reorders so recommended types appear first with a 'star (recommended)' suffix on the option label. 2. Inline advisory below the select when the current pick is non-recommended for the path's geometry. Rules: - 2-node line -> running recommended - Closed 3+-node shape -> fill recommended - 4+-node polyline -> satin recommended (narrow column case) - cross-stitch / zigzag always available regardless of geometry Advisory text (e.g. fill on a 2-node line -> 'fill is unusual for a 2-node line. Consider running.'; fill on an open 3+-node polyline -> 'fill needs a closed path to enclose an area.') plus a fallback 'is unusual for this path's geometry' message. 16 tests in src/components/editor/issue-354.test.tsx pin the helper contract and the dropdown / advisory markup. Pure helpers exported as recommendedStitchTypes + stitchTypeAdvisory for direct unit tests. Typecheck + lint clean; pre-existing test failures (issues #329/#331/#333/#334 - closed-path findTightCurves crash) unchanged.

Mark closed this issue

2026-10-05 12:18:14 +00:00

Mark referenced this issue

2026-10-05 18:54:44 +00:00

Editor's Path Properties has 'Stitch type' but no 'recommended stitch type' for the path's geometry — user with a 2-node line gets a 'Satin' option (which is unusual for a line) #385