+
+ {/if}
+
+ {#if state.step === 'mask'}
+ Capture Photos
+Select 1–5 photos of the slab. Supported: JPG, PNG, WEBP.
+
+ handleFiles(e.target.files)} class="file-input" />
+
+
+ {#if state.photos.length > 0}
+
+ {#each state.photos as photo, i}
+
+
+ {/if}
+
+ })
+ Photo {i + 1}
+
+ {/each}
+
+
+ {/if}
+
+ {#if state.step === 'axis'}
+ Mask & Knobs
+Adjust knobs to refine the mask. Green overlay shows the detected slab.
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const knobs = getMaskKnobs();
+ applyMaskKnobs({ ...knobs, sensitivity: parseFloat(e.target.value) });
+ maskCanvas && drawMaskOverlay(maskCanvas, currentPhoto()!);
+ }} />
+
+
+
+ {
+ const knobs = getMaskKnobs();
+ applyMaskKnobs({ ...knobs, edgeOffset: parseInt(e.target.value) });
+ maskCanvas && drawMaskOverlay(maskCanvas, currentPhoto()!);
+ }} />
+
+
+
+ {
+ const knobs = getMaskKnobs();
+ applyMaskKnobs({ ...knobs, feather: parseInt(e.target.value) });
+ maskCanvas && drawMaskOverlay(maskCanvas, currentPhoto()!);
+ }} />
+
+
+
+
+
+
+
+
+
+
+
+ {/if}
+
+ {#if state.step === 'numbers'}
+ Length Axis
+Confirm the length direction. Rotate in 90° increments if needed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/if}
+
+ {#if state.step === 'review'}
+ Enter Numbers
+Enter the slab's length, thickness, and SKU. Values are computed automatically.
+
+
+
+
+ updateLengthIn(e.target.value)} />
+ 1/8" steps
+
+
+
+ updateThicknessIn(e.target.value)} />
+ 1/8" steps
+
+
+
+ updateSku(e.target.value)}
+ class:invalid={!state.skuValidation.valid} />
+ {state.skuValidation.valid ? '✓ Valid' : state.skuValidation.errors.join(', ')}
+
+
+
+ {#if !state.meetsMinPx}
+ Computed
+
+
+
+ Sqft
+ {state.sqft.toFixed(2)}
+
+
+ Bdft
+ {state.bdft.toFixed(2)}
+
+
+ Width Min
+ {state.widthStats ? state.widthStats.min.toFixed(2) : '—'}"
+
+
+ Width Max
+ {state.widthStats ? state.widthStats.max.toFixed(2) : '—'}"
+
+
+ Width Avg
+ {state.widthStats ? state.widthStats.average.toFixed(2) : '—'}"
+
+ ⚠️ Source image is too small for 1600px minimum output. Consider retaking photos.
+ {/if}
+
+
+
+
+
+
+ {/if}
+Review & Upload
+Review the values. If correct, upload to create a calibrated draft.
+ + {#if state.uploaded} +
+
+ {:else if state.uploadError}
+ ✓ Upload Successful
+Slab ID: {state.reviewData?.id}
Server Rev: {state.reviewData?.serverRev}
+ +
+
+ {:else}
+ ✗ Upload Failed
+{state.uploadError}
+ +
+
+
+
+ SKU:{state.sku}
+ Length:{state.lengthIn}"
+ Thickness:{state.thicknessIn}"
+ Sqft:{state.sqft.toFixed(2)}
+ Bdft:{state.bdft.toFixed(2)}
+ {#if state.widthStats}
+ Width Range:{state.widthStats.min.toFixed(2)}"–{state.widthStats.max.toFixed(2)}"
+ {/if}
+
+
+ 3:4 PNG Preview
+ + {#if !state.meetsMinPx} + ⚠️ Output may be below 1600px minimum + {/if} +
+
+
+
+ {/if}
+