feat: implement inpainting functionality with mask handling

- Added `createMaskedPixelReplacementSource` function to handle pixel replacement using inpainting.
- Introduced `buildInpaintBundle` to prepare inpainting data including mask generation and validation.
- Created utility functions for mask operations such as `applyMaskedContentModeToRgba`, `expandRectWithinBounds`, and others for mask manipulation.
- Developed tests for inpainting preparation and mask raster utilities to ensure functionality and correctness.
- Implemented mask raster operations including inversion, feathering, blurring, and more.

view/bottom-controls/GenerateControls.tsx

@@ -21,6 +21,18 @@ const sizePresets = [
   { label: "9:16", w: 768, h: 1344 },
 ] as const;
 
+const inpaintPolarityOptions = [
+  { value: "hidden", label: "Hidden / erased" },
+  { value: "revealed", label: "Revealed / painted" },
+] satisfies readonly BottomControlSelectOption<GenerateSettings["inpaint"]["maskPolarity"]>[];
+
+const inpaintMaskedContentOptions = [
+  { value: "neutral", label: "Neutral fill" },
+  { value: "original", label: "Original gray" },
+  { value: "originalColor", label: "Original color" },
+  { value: "edges", label: "Edge map" },
+] satisfies readonly BottomControlSelectOption<GenerateSettings["inpaint"]["maskedContent"]>[];
+
 export type GenerateControlsProps = {
   settings: GenerateSettings;
   dispatch: AppStore["dispatch"];
@@ -32,6 +44,7 @@ export function GenerateControls({ settings, dispatch }: GenerateControlsProps)
   const [schedulers, setSchedulers] = useState<readonly BottomControlSelectOption<string>[]>([{ value: settings.scheduler, label: settings.scheduler }]);
   const [advancedOpen, setAdvancedOpen] = useState(false);
   const [outpaintOpen, setOutpaintOpen] = useState(false);
+  const [inpaintOpen, setInpaintOpen] = useState(false);
   const [sizeOpen, setSizeOpen] = useState(false);
   const sizeRef = useRef<HTMLDivElement>(null);
   const [error, setError] = useState<string>();
@@ -141,6 +154,44 @@ export function GenerateControls({ settings, dispatch }: GenerateControlsProps)
           <PanelNumber label="Feather" aria-label="Outpaint feathering" value={settings.outpaint.feathering} onValueChange={(feathering) => dispatch(commandIds.toolSetGenerateSettings, { outpaint: { ...settings.outpaint, feathering } })} />
         </div>
       </section>
+
+      <section className={panelSectionClass()}>
+        <button type="button" className={sectionToggleClass()} aria-expanded={inpaintOpen} aria-controls="generate-inpaint-controls" onClick={() => setInpaintOpen((open) => !open)}>
+          <span>
+            <span className="block text-sm font-semibold text-white/85">Inpaint</span>
+            <span className="block text-xs text-white/40">Mask polarity, crop padding, edge prep, grow</span>
+          </span>
+          {inpaintOpen ? <CaretUp size={18} weight="bold" /> : <CaretDown size={18} weight="bold" />}
+        </button>
+        <div id="generate-inpaint-controls" className={`grid gap-2 overflow-hidden transition-all duration-200 ${inpaintOpen ? "max-h-[38rem] pt-2 opacity-100" : "max-h-0 opacity-0"}`}>
+          <PanelSelect
+            label="Polarity"
+            value={settings.inpaint.maskPolarity}
+            options={inpaintPolarityOptions}
+            ariaLabel="Inpaint mask polarity"
+            onValueChange={(maskPolarity) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, maskPolarity } })}
+          />
+          <PanelSelect
+            label="Content"
+            value={settings.inpaint.maskedContent}
+            options={inpaintMaskedContentOptions}
+            ariaLabel="Inpaint masked content"
+            onValueChange={(maskedContent) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, maskedContent } })}
+          />
+          <button type="button" className={compactRowButtonClass()} aria-pressed={settings.inpaint.maskedAreaOnly} onClick={() => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, maskedAreaOnly: !settings.inpaint.maskedAreaOnly } })}>
+            <span className={panelLabelClass()}>Frame</span>
+            <span className="min-w-0 flex-1 text-right text-white">{settings.inpaint.maskedAreaOnly ? "Mask crop" : "Full layer"}</span>
+          </button>
+          <div className="grid grid-cols-2 gap-2">
+            <PanelNumber label="Pad" aria-label="Inpaint crop padding" value={settings.inpaint.cropPadding} max={2048} onValueChange={(cropPadding) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, cropPadding } })} />
+            <PanelNumber label="Grow" aria-label="Inpaint backend grow mask" value={settings.inpaint.growMaskBy} max={256} onValueChange={(growMaskBy) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, growMaskBy } })} />
+            <PanelNumber label="Expand" aria-label="Inpaint mask expand" value={settings.inpaint.maskExpand} min={-256} max={256} onValueChange={(maskExpand) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, maskExpand } })} />
+            <PanelNumber label="Feather" aria-label="Inpaint mask feather" value={settings.inpaint.maskFeather} max={256} onValueChange={(maskFeather) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, maskFeather } })} />
+            <PanelNumber label="Blur" aria-label="Inpaint mask blur" value={settings.inpaint.maskBlur} max={256} onValueChange={(maskBlur) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, maskBlur } })} />
+            <PanelNumber label="Clean" aria-label="Inpaint mask despeckle" value={settings.inpaint.maskDespeckle} max={64} onValueChange={(maskDespeckle) => dispatch(commandIds.toolSetGenerateSettings, { inpaint: { ...settings.inpaint, maskDespeckle } })} />
+          </div>
+        </div>
+      </section>
     </div>
   );
 }